<template>
  <div>
    <div>
      <div>
        <span>名称：</span>
        <Input
          v-model="input_Name"
          placeholder="请输入编号"
          style="width: auto; margin-right: 20px"
        />
        <span>手机号码：</span>
        <Input
          v-model="input_Phone_number"
          placeholder="请输入手机号码"
          style="width: auto; margin-right: 20px"
        />
        <span>公司电话：</span>
        <Input
          v-model="input_Company_number"
          placeholder="请输入公司号码"
          style="width: auto; margin-right: 20px"
        />
        <Button
          type="primary"
          icon="ios-search"
          :loading="loading"
          @click="btn_search"
          style="margin-right: 20px"
        >
          <span v-if="!this.loading">查询</span>
          <span v-else>查询中</span>
        </Button>
        <Button icon="md-refresh" @click="reset">重置</Button>
      </div>

      <div style="margin-top: 30px">
        <Button
          type="primary"
          icon="md-add"
          size="large"
          style="margin-right: 10px"
          @click="handleEdit()"
          >增加</Button
        >
        <Button
          type="primary"
          icon="md-log-in"
          size="large"
          style="margin-right: 10px"
          >导入</Button
        >
        <Button
          type="primary"
          icon="md-download"
          size="large"
          style="margin-right: 10px"
          >导出</Button
        >
        <Dropdown v-show="dropdown_show">
          <Button type="primary" size="large">
            批量操作
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem><Icon type="ios-trash" /> 删除</DropdownItem>
            <DropdownItem
              ><span @click="open_enable"
                ><Icon type="md-checkmark" /> 启用</span
              ></DropdownItem
            >
            <DropdownItem>
              <span @click="open_disable"
                ><Icon type="md-close" /> 禁用</span
              ></DropdownItem
            >
          </DropdownMenu>
        </Dropdown>
        <el-dialog :title="modeltitle" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="名称:" :label-width="formLabelWidth">
              <el-input
                v-model="form.supplierName"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系人:" :label-width="formLabelWidth">
              <el-input
                v-model="form.contactPerson"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码:" :label-width="formLabelWidth">
              <el-input
                v-model="form.phone"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱:" :label-width="formLabelWidth">
              <el-input
                v-model="form.email"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话:" :label-width="formLabelWidth">
              <el-input
                v-model="form.companyNumber"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="期初应收:" :label-width="formLabelWidth">
              <el-input
                v-model="form.beginReceive"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="期末应收:" :label-width="formLabelWidth">
              <el-input
                v-model="form.endReceive"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="期初应付:" :label-width="formLabelWidth">
              <el-input
                v-model="form.beginPayment"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="期末应付:" :label-width="formLabelWidth">
              <el-input
                v-model="form.endPayment"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="税率(%):" :label-width="formLabelWidth">
              <el-input
                v-model="form.taxRate"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="开户行:" :label-width="formLabelWidth">
              <el-input
                v-model="form.accountBank"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="账号:" :label-width="formLabelWidth">
              <el-input
                v-model="form.accountNumber"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="地址:" :label-width="formLabelWidth">
              <el-input
                v-model="form.address"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                :rows="1"
                placeholder="请输入内容"
                v-model="form.remarks"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialog_click">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <div>
        <el-table
          v-loading="table_loading"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>

          <el-table-column property="supplierName" label="供应商名称">
          </el-table-column>
          <el-table-column property="contactPerson" label="联系人">
          </el-table-column>
          <el-table-column property="phone" label="手机号"> </el-table-column>
          <el-table-column property="companyNumber" label="联系电话">
          </el-table-column>
          <el-table-column property="beginReceive" label="期初应收">
          </el-table-column>
          <el-table-column property="beginPayment" label="期初应付">
          </el-table-column>
          <el-table-column property="endReceive" label="期末应收">
          </el-table-column>
          <el-table-column property="endPayment" label="期末应付">
          </el-table-column>
          <el-table-column property="taxRate" label="税率"> </el-table-column>
          <el-table-column property="erpState.stateName" label="状态">
            <template slot-scope="scope">
              <el-tag
                :type="
                  scope.row.erpState.stateName === '启用' ? 'primary' : 'danger'
                "
                disable-transitions
                >{{ scope.row.erpState.stateName }}</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button size="mini" type="danger"
                @click="handleDelete(scope.$index,scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <Page
          @on-change="tableData_query"
          :total="total"
          show-total
          :page-size="pagesize"
          style="float: right"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      table_loading: true,
      input_Name: "",
      input_Phone_number: "",
      input_Company_number: "",
      loading: false,
      tableData: [],
      total: 0,
      currentPage: 1,
      pagesize: 7,
      dropdown_show: false,
      selectionData: [],
      modeltitle: "",
      dialogFormVisible: false,
      form: {
        id: "",
        supplierName: "",
        contactPerson: "",
        phone: "",
        email: "",
        companyNumber: "",
        beginReceive: "",
        endReceive: "",
        beginPayment: "",
        endPayment: "",
        taxRate: "",
        accountBank: "",
        accountNumber: "",
        address: "",
        remarks: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.tableData_query();
  },
  methods: {
    //查询方法
    btn_search() {
      this.loading = true;
      this.tableData_query();
      this.loading = false;
    },
    //重置方法
    reset() {
      this.input_Name = "";
      this.input_Phone_number = "";
      this.input_Company_number = "";
    },
    //table数据
    tableData_query(currentPage) {
      if (currentPage != null) {
        this.currentPage = currentPage;
      }
      axios
        .post(
          "http://localhost:8082/supp/queryAll?name=" +
            this.input_Name +
            "&phone=" +
            this.input_Phone_number +
            "&CompanyNumber=" +
            this.input_Company_number +
            "&page=" +
            this.currentPage +
            "&limit=" +
            this.pagesize
        )
        .then((res) => {
          console.log(res.data);
          this.tableData = res.data.list;
          this.total = res.data.count;
          this.table_loading = false;
        });
    },
    handleSelectionChange(rows) {
      this.dropdown_show = true;
      this.selectionData = rows;
      console.log(this.selectionData);
      if (rows.length == 0) {
        this.selectionData = [];
        this.dropdown_show = false;
      }
    },
    open_enable() {
      this.$confirm("此操作将启用所选供应商, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let arrs = [];
        this.selectionData.forEach(function (e) {
          arrs.push(e.id);
        });
        axios
          .post("http://localhost:8082/supp/updateBatchById", arrs)
          .then((res) => {
            if (res.data != 0) {
              this.tableData_query();
              this.$notify({
                title: "成功",
                message: "成功启用",
                type: "success",
                duration: 4500,
              });
            }
          });
      });
    },
    open_disable() {
      this.$confirm("此操作将禁用所选供应商, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let arrs = [];
        this.selectionData.forEach(function (e) {
          arrs.push(e.id);
        });
        axios
          .post("http://localhost:8082/supp/updateBatchByIdstatus", arrs)
          .then((res) => {
            if (res.data != 0) {
              this.tableData_query();
              this.$notify({
                title: "成功",
                message: "成功禁用",
                type: "success",
                duration: 4500,
              });
            }
          });
      });
    },
    handleEdit(index, row) {
      if (row != null) {
        console.log(row);
        this.dialogFormVisible = true;
        this.modeltitle = "修改";
        this.form.id = row.id;
        this.form.supplierName = row.supplierName;
        this.form.contactPerson = row.contactPerson;
        this.form.phone = row.phone;
        this.form.email = row.email;
        this.form.companyNumber = row.companyNumber;
        this.form.beginReceive = row.beginReceive;
        this.form.endReceive = row.endReceive;
        this.form.beginPayment = row.beginPayment;
        this.form.endPayment = row.endPayment;
        this.form.taxRate = row.taxRate;
        this.form.accountBank = row.accountBank;
        this.form.accountNumber = row.accountNumber;
        this.form.address = row.address;
        this.form.remarks = row.remarks;
      } else {
        this.modeltitle = "新增";
        this.dialogFormVisible = true;
        this.form = {};
      }
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('此操作将永久删除该供应商, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post("http://localhost:8082/supp/delteById?id="+row.id).then(res=>{
            if(res!=0){
              this.tableData_query();
              this.$notify({
                title: "成功",
                message: "成功删除",
                type: "success",
                duration: 4500,
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    dialog_click() {
      if (this.modeltitle == "新增") {
        axios
          .post("http://localhost:8082/supp/insertSupp", this.form)
          .then((res) => {
            if (res.data > 0) {
              this.dialogFormVisible = false;
              this.tableData_query();
              this.$notify({
                title: "成功",
                message: "添加成功",
                type: "success",
                duration: 4500,
              });
            }
          });
      } else {
        axios
          .post("http://localhost:8082/supp/updateSupp", this.form)
          .then((res) => {
            if (res.data > 0) {
              this.dialogFormVisible = false;
              this.tableData_query();
              this.$notify({
                title: "成功",
                message: "修改成功",
                type: "success",
                duration: 4500,
              });
            }
          });
      }
    },
    p(index) {
      alert(index);
    },
  },
};
</script>
<style>
.el-form-item {
  display: inline-block;
}
</style>

